<template>
  <div class="main5 animate__animated animate__fadeInRightBig animate__faster flex-jucalic">
    <span class="title">邀请团队成员</span>
    <label class="flex-juc">
      <span>成员邮箱</span>
      <el-input v-for="(item, index) in members" v-model="item.value" :key="index" />
    </label>

    <div class="addMember" @click="addMember">
      <span class="iconfont icon-tianjia1"></span>
      <span>添加另一个成员</span>
    </div>



  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue';
const props = defineProps<{ members: { value: string }[] }>()
// const emits = defineEmits(["update:members"])
// const members = ref<{ value: string }[]>([{ value: "" }])

function addMember() {
  if (!props.members.every(item => item.value.length != 0)) return;
  props.members.push({ value: "" })
}


</script>

<style lang="scss" scoped>
.main5 {
  flex-direction: column;
  height: 568px;
  justify-content: flex-start;
  margin-top: 30px;

  .title {
    font-weight: bold;
    font-size: 25px;
  }

  >label {
    flex-direction: column;
    text-align: left;
    gap: 10px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    >span {
      color: #c1cfc2;
    }

    :deep(.el-input) {
      width: 450px;
      height: 46px;
      font-size: 20px;
      margin: 10px 0;
    }
  }

  .addMember {
    display: flex;
    color: #3F8CFF;
    align-items: center;
    gap: 10px;
    margin: 10px 0;

    >.iconfont {
      font-size: 25px;
    }
  }

}
</style>